<template>
    <RecycleScroller ref="scroller" class="message-scroller" :items="messages" :buffer="1000"
        v-slot="{ item, index }">
        <div :class="['message-item', {'user-color': item.befrom=='user'}]">
            <div class="be-from">
                <svg-icon v-if="item.befrom=='user'" icon-class="user" width="16" height="16" ></svg-icon>
                <svg-icon v-else icon-class="ai" width="16" height="16" ></svg-icon>
                <div style="margin-left: 5px;">
                    {{ item.befrom }}
                </div>
            </div>
            <div class="message-content">{{ item.content }}</div>
            <div class="message-time">{{ parseTime(item.timestamp) }}</div>
        </div>
    </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
export default {
    name: "MessageScroller",
    data() {
        return {
            userScrolledUp: false,
        }
    },
    components: {
        RecycleScroller
    },

    props: {
        messages: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    watch: {
        messages: function (val) {
            if (!this.userScrolledUp) {
                this.scrollToBottom()
            }
        }
    },
    mounted() {
        this.$refs.scroller.$el.addEventListener("scroll", this.handleScroll);
        // this.intervalId = setInterval(() => {
        //     const lastMsg = this.messages[this.messages.length - 1]
        //     lastMsg.content += "哈哈"
        //     let size = 100 + parseInt(lastMsg.content.length / 34) * 20
        //     if (size > lastMsg.size){
        //         lastMsg.content += "\n"
        //         lastMsg.size = size
        //         if (!this.userScrolledUp) {
        //         this.scrollToBottom()
        //     }
        //     }
        //     console.log(lastMsg.size);
        // }, 100)
    },
    beforeDestroy() {
        this.$refs.scroller.$el.removeEventListener("scroll", this.handleScroll);
        // clearInterval(this.intervalId);
    },
    methods: {
        scrollToBottom() {
            this.$nextTick(() => {
                const scroller = this.$refs.scroller
                if (!scroller) return
                // 获取实际的DOM容器
                const scrollContainer = scroller.$el || scroller.$el.querySelector('.vue-recycle-scroller')
                // 使用原生DOM方法滚动到底部
                if (scrollContainer) {
                    scrollContainer.scrollTop = scrollContainer.scrollHeight
                }
            })
        },

        handleScroll() {
            const scroller = this.$refs.scroller
            if (!scroller) return
            const scrollContainer = scroller.$el || scroller.$el.querySelector('.vue-recycle-scroller')
            if (!scrollContainer) return
            const bottomOffset = scrollContainer.scrollHeight - scrollContainer.scrollTop - scrollContainer.clientHeight
            this.userScrolledUp = bottomOffset > 10
        },

        formatTime(timestamp) {
            return this.formatDate(timestamp) }
        },
    }

</script>

<style lang="scss" scoped>
.message-scroller {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 5px;
    color: var(--app-primary-base);
    .user-color{
        color: var(--ui-text-color);
    }
    .message-item {
        opacity: 1;
        padding: 5px 3px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        background-color: var(--ui-component-background-alt);
        border-radius: 5px;

        .be-from {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            margin-left: 5px;
            font-size: var(--ui-font-size-sm);
        }

        .message-time {
            margin-top: 10px;
            margin-left: 5px;
            font-size: var(--ui-font-size-sm);
        }

        .message-content {
            font-size: 12px;
            background-color: var(--app-primary-8);
            border-radius: 6px !important;
            border: 1px solid var(--app-primary-8);
            padding: 0 4px;
        }
    }
}
</style>